.player{
    .normal-player{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 150;
        background: #f2f3f4;
        .background{
            position: absolute;
            left: -50%;
            top: -50%;
            width: 300%;
            height: 300%;
            z-index: -1;
            opacity: .6;
            -webkit-filter: blur(30px);
            filter: blur(0.3rem);
            .filter{
                position: absolute;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
            }
        }
        .top{
            position: relative;
            margin-bottom: 0.25rem;
            .back{
                position: absolute;
                top: 0;
                left: 0.06rem;
                z-index: 50;
                .iconfont{
                    display: block;
                    padding: 0.1rem 0.09rem;
                    font-size: 0.25rem;
                    color: #f1f1f1;
                }
            }
            .title{
                padding-top: 0.1rem;
                font-size: 0.18rem;
                font-weight: 700;
                width: 70%;
                margin: 0 auto;
                line-height: 0.2rem;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                color: #f1f1f1;
            }
            .subtitle{
                width: 70%;
                margin: 0 auto;
                line-height: 0.2rem;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                color: #f1f1f1;
                font-weight: 400;
                font-size: 0.13rem;
            }
        }
        .middle{
            display: flex;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 80px;
            bottom: 1.7rem;
            white-space: nowrap;
            font-size: 0;
            .middle-l{
                display: inline-block;
                vertical-align: top;
                position: relative;
                width: 100%;
                height: 0;
                padding-top: 80%;
                .cd-wrapper{
                    position: absolute;
                    left: 10%;
                    top: 0;
                    width: 80%;
                    height: 100%;
                    .cd{
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        border: 0.15rem solid hsla(0,0%,100%,.1);
                        border-radius: 50%;
                        &.play{
                            animation: cd 20s linear infinite;
                        }
                        &.pause{
                            animation-play-state: paused;
                        }
                        img{
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                }
            }
            .middle-r{
                display: inline-block;
                position: absolute;
                top: 0;
                vertical-align: top;
                width: 100%;
                height: 100%;
                overflow: hidden;
                -webkit-mask: -webkit-linear-gradient(top,rgba(0,0,0,0.2),#fff 30%,#fff 50%,rgba(0,0,0,0.4));
                .lyric-wrapper{
                    width: 80%;
                    margin: 0 auto;
                    overflow: hidden;
                    text-align: center;
                    .no-lyric{
                        line-height: 0.4rem;
                        margin-top: 60%;
                        color: #c7c7c7;
                        font-size: 0.14rem;
                    }
                    .lyric__para{
                        line-height: 2;
                        margin: 0 .2rem;
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: .15rem;
                        color: rgba(255, 255, 255, 0.9);
                        &.current{
                            color: #31c27c;
                        }
                    }
                }
            }
        }
        .bottom{
            position: absolute;
            bottom: 0.5rem;
            width: 100%;
            .progress-wrapper{
                display: flex;
                align-items: center;
                width: 80%;
                margin: 0 auto;
                padding: 0.1rem 0;
                .time{
                    color: #f1f1f1;
                    font-size: 0.11rem;
                    flex: 0 0 0.3rem;
                    line-height: 0.3rem;
                    width: 0.3rem;
                    &.time-l{
                        text-align: left;
                    }
                    &.time-r{
                        text-align: right;
                        color: #dbdbdb;
                    }
                }
                .progress-bar-wrapper{
                    flex : 1;
                    .progress-bar{
                        height: 0.3rem;
                        .bar-inner{
                            position: relative;
                            top: 0.13rem;
                            height: 0.04rem;
                            background: rgba(0,0,0,.3);
                            .progress{
                                position: absolute;
                                height: 100%;
                                background: #d44439;
                            }
                            .progress-btn-wrapper{
                                position: absolute;
                                left: -0.08rem;
                                top: -0.13rem;
                                width: 0.3rem;
                                height: 0.3rem;
                                .progress-btn{
                                    position: relative;
                                    top: 0.07rem;
                                    left: 0.07rem;
                                    box-sizing: border-box;
                                    width: 0.16rem;
                                    height: 0.16rem;
                                    border: 0.05rem solid #f1f1f1;
                                    border-radius: 50%;
                                    background: #d44439;
                                }
                            }
                        }
                    }
                }
            }
            .operators{
                display: flex;
                align-items: center;
                .icon{
                    flex: 1;
                    color: #f1f1f1;
                    &.i-left{
                        text-align: right;
                    }
                    &.i-center{
                        padding: 0 0.2rem;
                        text-align: center; 
                    }
                    &.i-right{
                        text-align: left;
                    }
                    .iconfont{
                        font-size: 0.25rem;
                    }
                    .mode{
                        font-size: 0.4rem;
                    }
                    .icon-zanting{
                        font-size: 0.4rem
                    }
                }
            }
        }
    }
}
@keyframes cd {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}

/*进度条和拖拽样式*/
progress{
    width: 100%
}
input[type=range]{
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px;
}
 /* 表示已完成进度背景色 */
progress::-webkit-progress-value{
    background-color:#f91604;
}
#range {
    width: 100%;
    height: 0rem;;
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    border: 0;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    position: relative;    /* 設為相對位置，為了前後區塊的絕對位置而設定 */
    width:0.15rem;
    height:0.15rem;
    background:#f22;
    border-radius:50%;
    transition:.2s;        /* 點選放大時候的漸變時間 */
    border: 0.04rem solid #fff;
  }

